<!-- 用户管理 -->
<template>
  <div id="user-profile" class="app-container">
    <div style="overflow: auto;" class="p-t-10">
      <el-form ref="dataForm" :rules="rules" :model="userRecord" label-position="right" label-width="120px">
        <div class="common-title m-b-20"><h2 class="bold">基本资料</h2></div>
        <el-form-item label="员工编号:">{{ userRecord.userCode }} </el-form-item>
        <el-form-item label="用户名:">{{ userRecord.userName }}
          <span v-if="!userRecord.userName">
            <i class="el-icon-edit color-primary  common-cursor" @click="handleSetUserName" />
          </span>
          <span v-if="userRecord.userName ===userRecord.mobile">
            <i class="el-icon-edit color-primary  common-cursor" @click="handleSetUserName" />
          </span>
          <span v-if="userRecord.isInner===1" style="margin-left:8px" class="color-primary">内部员工</span>
          <span v-if="userRecord.isInner===0" style="margin-left:8px" class="color-danger">外部员工</span>
        </el-form-item>
        <el-form-item label="姓名:" prop="realName">
          <el-input v-model="userRecord.realName" maxlength="10" show-word-limit placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号:">{{ userRecord.mobile }}</el-form-item>
        <el-form-item label="电子邮箱:">
          {{ userRecord.email }}
          <span v-if="!userRecord.email">还未绑定邮箱，<span class="color-danger common-cursor" @click="handleBindEmail">去绑定</span></span>
        </el-form-item>
        <el-form-item label="昵称:" prop="nickName">
          <el-input v-model="userRecord.nickName" maxlength="20" show-word-limit placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item label="性别:" prop="gender">
          <el-radio-group v-model="userRecord.gender">
            <el-radio :label="0">保密</el-radio>
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个性签名:" prop="signature">
          <el-input v-model="userRecord.signature" maxlength="50" show-word-limit clearable placeholder="请输入个性签名" />
        </el-form-item>
        <el-form-item label="技能/特长" prop="skills">
          <DataDictSelect v-model="userRecord.skills" code="skill" :multiple="true" />
        </el-form-item>
        <el-form-item label="自我介绍:" prop="introduction">
          <el-input v-model="userRecord.introduction" :rows="4" type="textarea" maxlength="200" show-word-limit placeholder="请输入自我介绍" />
        </el-form-item>
        <el-form-item label="注册时间:">
          {{ userRecord.gmtCreated | formatDate }}
        </el-form-item>
        <el-form-item label="登录信息:">
          <el-row>
            <el-col :span="8">
              上次登录信息：{{ userRecord.prevLoginIp }}、{{ userRecord.prevLoginDate | formatDate }}
            </el-col>
            <el-col :span="8">
              最后登录信息：{{ userRecord.lastLoginIp }}、{{ userRecord.lastLoginDate | formatDate }}
            </el-col>
            <el-col :span="8">
              登录次数：{{ userRecord.loginNum?userRecord.loginNum:0 }}次
            </el-col>
          </el-row>
        </el-form-item>
        <div class="common-title m-b-20"><h2 class="bold">详细资料</h2></div>
        <el-form-item label="座机:" prop="phone">
          <el-input v-model="userRecord.phone" maxlength="15" show-word-limit placeholder="请输入座机号码" />
        </el-form-item>
        <el-form-item label="证件号码:">{{ userRecord.idNumber }} </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="微信:" prop="weixin">
              <el-input v-model="userRecord.weixin" maxlength="30" show-word-limit placeholder="请输入微信" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="QQ:" prop="qq">
              <el-input v-model="userRecord.qq" maxlength="15" show-word-limit placeholder="请输入QQ" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="加入的组织:" prop="reportsTo">
          <el-table
            :data="userRecord.upmsOrganizations "
            style="width: 100%">
            <el-table-column prop="addTime" width="150" label="加入时间">
              <template slot-scope="scope">{{ scope.row.addTime | formatDate }}</template>
            </el-table-column>
            <el-table-column prop="_fullOrgName" label="组织" :show-overflow-tooltip="true" min-width="180" />
            <el-table-column label="职务" prop="orgJob" width="100" :show-overflow-tooltip="true" />
            <el-table-column prop="orgPhone" :show-overflow-tooltip="true" width="160" label="电话" />
            <el-table-column label="操作" align="center" fixed="right" width="60">
              <template slot-scope="scope">
                <button-option icon="el-icon-edit" skin="primary" title="编辑" @click="handleUpdateUserOrg(scope.row)" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="籍贯:">
          <region-selector v-model="userRecord.nativePlaceLevel" :level="3" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="民族:" prop="nation">
              <data-dict-select v-model="userRecord.nation" :code="'nation'" placeholder="请选择民族" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人员编制:" prop="staffing">
              <el-input v-model="userRecord.staffing" maxlength="40" show-word-limit placeholder="请输入人员编制" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="入职时间:" prop="startWorkDate">
              <el-date-picker
                v-model="userRecord.startWorkDate"
                style="width:100%"
                type="date"
                value-format="timestamp"
                placeholder="选择入职时间" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学历:" prop="education">
              <data-dict-select v-model="userRecord.education" :code="'education'" placeholder="请选择学历" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="政治面貌:" prop="politicalOutlook">
              <data-dict-select v-model="userRecord.politicalOutlook" :code="'political'" placeholder="请选择政治面貌" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文化程度:" prop="educationDegree">
              <data-dict-select v-model="userRecord.educationDegree" :code="'educatio'" placeholder="请选择文化程度" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="婚姻状况:" prop="maritalStatus">
              <data-dict-select v-model="userRecord.maritalStatus" :code="'marital'" placeholder="请选择婚姻状况" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所学专业:" prop="major">
              <data-dict-select v-model="userRecord.major" :code="'major'" placeholder="请选择所需专业" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="毕业院校:" prop="graduateSchool">
              <el-input v-model="userRecord.graduateSchool" maxlength="20" show-word-limit placeholder="请输入毕业院校" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="最高学位:" prop="highestDegree">
              <el-input v-model="userRecord.highestDegree" maxlength="18" show-word-limit placeholder="请输入最高学位" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="紧急联系:" prop="emergencyContact">
              <el-input v-model="userRecord.emergencyContact" maxlength="11" show-word-limit placeholder="请输入紧急联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="紧急电话:" prop="emergencyContactMobile">
              <el-input v-model="userRecord.emergencyContactMobile" maxlength="11" show-word-limit placeholder="请输入紧急联系电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="现住址:">
          <region-selector ref="regionSelect" v-model="userRecord.currentResidenceLevel" />

        </el-form-item>
        <el-form-item label="详细地址:" prop="currentAddress">
          <el-input v-model="userRecord.currentAddress" maxlength="100" show-word-limit placeholder="请输入详细地址" />
        </el-form-item>

        <el-row>
          <el-col :span="24" class="tc">
            <el-button type="primary" plain @click="modifyPersonInfo">修改</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--新增/编辑侧边栏-->
    <side-box :show="sideBox.recordShow" :title="sideBox.title" @close="sideBox.recordShow = !sideBox.recordShow">
      <template slot="body">
        <el-form
          ref="dataForm"
          :model="upmsUserOrganizationRecord"
          label-position="right"
          label-width="120px">
          <el-form-item label="电话:" prop="phone">
            <el-input v-model="upmsUserOrganizationRecord.phone" maxlength="20" show-word-limit placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="岗位:" prop="job">
            <data-dict-select v-model="upmsUserOrganizationRecord.job" :code="'postType'" placeholder="请选择岗位" />
          </el-form-item>
          <el-form-item label="排序:" prop="orders">
            <el-input-number v-model="upmsUserOrganizationRecord.orders" placeholder="请输入排序" show-word-limit :min="1" :max="99" style="width:100%" />
          </el-form-item>
        </el-form>
      </template>
      <template slot="foot">
        <el-button type="primary" plain @click="updateOrgUserData">保存 </el-button>
      </template>
    </side-box>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    user: {
      type: Object,
      default: function() {
        return {
          upmsOrganizations: [],
          upmsRoles: []
        }
      }
    }
  },
  data() {
    return {
      userRecord: this.user,
      rules: {
        nickName: [
          { required: true, message: '请输入昵称', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { validator: this.$validate.validateRealName, trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        job: [
          { required: true, message: '请选择职务', trigger: 'blur' }
        ],
        idNumber: [
          { validator: this.$validate.validateIDCard, trigger: 'blur' }
        ]
      },
      permissionData: [],
      // 固定写法
      sideBox: {
        recordShow: false,
        title: ''
      },
      upmsUserOrganizationRecord: {}
    }
  },
  computed: {

  },
  watch: {
    activeName(val) {
    },
    user(val) {
      this.userRecord = val
    },
    'userRecord.idNumber': function(val) {
      if (val) {
        var res = this.T.analyzeIDCard(val)
        if (res) {
          this.userRecord = {
            ...this.userRecord,
            gender: res.sex,
            birthday: res.birthday
          }
        } else {
          this.userRecord = {
            ...this.userRecord,
            gender: 1,
            birthday: null
          }
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    handleBindEmail() {
      window.open(this.$router.resolve({ path: '/common/profile', query: { view: 'email' }}).href, '_self')
      window.location.reload()
    },
    modifyPersonInfo() {
      var tempData = Object.assign({}, this.userRecord)
      if (tempData.currentResidenceLevel.length === 4) {
        tempData = {
          ...tempData,
          currentResidenceLevel1: tempData.currentResidenceLevel[0],
          currentResidenceLevel2: tempData.currentResidenceLevel[1],
          currentResidenceLevel3: tempData.currentResidenceLevel[2],
          currentResidenceLevel4: tempData.currentResidenceLevel[3]
        }
      }
      if (tempData.nativePlaceLevel.length >= 3) {
        tempData = {
          ...tempData,
          nativePlaceLevel1: tempData.nativePlaceLevel[0],
          nativePlaceLevel2: tempData.nativePlaceLevel[1],
          nativePlaceLevel3: tempData.nativePlaceLevel[2]
        }
      }
      delete tempData.nativePlaceLevel
      delete tempData.currentResidenceLevel
      delete tempData.upmsOrganizations
      delete tempData.upmsRoles
      if (tempData.skills.length !== 0) {
        tempData = {
          ...tempData,
          skill: tempData.skills.join(',')
        }
      }
      delete tempData.skills
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$store.dispatch('modifyPersonInfo', tempData).then(response => {
            this.$modal.msgSuccess('修改成功')
            this.$emit('success')
          }).catch(() => {
          })
        } else {
          this.$modal.msgWarning('还有未填的参数!')
        }
      })
    },
    handleUpdateUserOrg(row) {
      console.log(row)
      this.upmsUserOrganizationRecord = {
        id: row.userOrgId,
        orders: row.orders,
        organizationId: row.id,
        phone: row.orgPhone,
        job: row.orgJob,
        userId: this.userRecord.id
      }
      this.sideBox = {
        recordShow: true,
        title: '编辑组织用户'
      }
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateOrgUserData() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$store.dispatch('organizationUserUpdate', this.upmsUserOrganizationRecord).then(response => {
            this.sideBox.recordShow = false
            this.$modal.msgSuccess('修改成功')
            this.$emit('success')
          }).catch(() => {
            this.sideBox.recordShow = true
          })
        }
      })
    },
    handleSetUserName() {
      this.$prompt('请输入用户名:', '用户信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^[0-9a-zA-Z].{2,10}$/,
        inputErrorMessage: '请输入3-11位用户名'
      }).then(({ value }) => {
        if (value === this.userRecord.userName) {
          this.$modal.msgWarning('用户名不能与原用户名一致！')
          this.handleSetUserName()
          return
        }
        this.$store.dispatch('modifyUserName', value).then((res) => {
          this.$modal.msgSuccess('用户名修改成功，建议重新登录系统，进行数据同步！')
          this.userRecord = {
            ...this.userRecord,
            userName: value
          }
        }).catch((_) => {
          this.handleSetUserName()
        })
      }).catch(() => {
      })
    }

  }
}
</script>
<style lang="scss">
</style>
